<script setup>
import { computed, onBeforeMount, onMounted, ref } from 'vue'
import axios from 'axios'
import CompHVxeTable from '@renderer/components/CompHVxeTable.vue'
import CompoAddRegCode from '@renderer/components/CompoAddRegCode.vue'
import CompoViewRegCode from '@renderer/components/CompoViewRegCode.vue'
import CompoAddSecretKey from '@renderer/components/CompoAddSecretKey.vue'

const inputValue = ref('')
const inputLen = computed(() => {
  return inputValue.value.length
})
const seckeysData = ref([])
async function fetchData() {
  try {
    const response = await axios.get('http://localhost:8080/list')
    seckeysData.value = response.data
  } catch (error) {
    console.log(error)
  }
}
const regcodesData = ref([])
async function fetchregCodes() {
  try {
    const response = await axios.get('http://localhost:8080/list_regcode')
    regcodesData.value = response.data
  } catch (error) {
    console.log(error)
  }
}
const tableConfig01 = ref({
  tableScroll: false,
  tableStripe: true,
  tableHeight: 300,
  headerHeight: 60,
  rowHeight: 50,
  seqWidth: 150,
  seqTitle: '客户序号',
  seqNoPre: 'Customer',
  seqNoStart: 1,
  seqNoPadLength: 5,
  intarvalTime: 1000,
  intervalFrames: 25,
  showCaozuo: true,
  tableClass: 'seckey_table',
  an1text: '使用这个SecretKey'
})
const tableFields01 = ref([
  { field: 'customerId', title: '客户id' },
  { field: 'customerSecKey', title: '客户的SecretKey' },
  { field: 'customerName', title: '客户名称' },
  { field: 'startTime', title: '开始服务的时间' }
])
const tableConfig02 = ref({
  tableScroll: false,
  tableStripe: true,
  tableHeight: 400,
  headerHeight: 60,
  rowHeight: 50,
  seqWidth: 150,
  seqTitle: 'SecretKey序号',
  seqNoPre: 'SecretKey',
  seqNoStart: 1,
  seqNoPadLength: 5,
  intarvalTime: 1000,
  intervalFrames: 25,
  showCaozuo: true,
  tableClass: 'regcode_table',
  an1text: '查看SecretKey'
})
const tableFields02 = ref([
  { field: 'id', title: '注册码的id', width: 100 },
  { field: 'regcode', title: '生成的注册码', width: 500 },
  { field: 'genetatedTime', title: '生成日期' },
  { field: 'expireTime', title: '到期日期' },
  { field: 'extendDays', title: '续期天数', width: 60 },
  { field: 'secretKey', title: '使用的secretKey' },
  { field: 'customerId', title: '客户的id' },
  { field: 'customerName', title: '客户名称' }
])
// 显示添加SecretKey组件
const showAddRegCode = ref(false)
const showViewRegCode = ref(false)
const showAddSecretKey = ref(false)
// 传递给添加SecretKey组件的数据
const dataAddSecretKey = ref({})
// 传递给显示SecretKey组件的数据
const dataViewSecretKey = ref({})
function openAddRegCode(data) {
  dataAddSecretKey.value = data
  showAddRegCode.value = true
}
function closeAddRegCode() {
  dataAddSecretKey.value = {}
  showAddRegCode.value = false
}
function openViewRegCode(data) {
  dataViewSecretKey.value = data
  console.log('openViewRegCode', dataViewSecretKey.value);
  
  showViewRegCode.value = true
}

function closeViewRegCode() {
  dataViewSecretKey.value = {}
  showViewRegCode.value = false
}
function openAddSecretKey(){
  showAddSecretKey.value = true
}
function closeAddSecretKeyFun(){
  showAddSecretKey.value = false
}
async function sendDataPost(data) {
  try {
    const response = await axios.post('http://localhost:8080/add_regcode', data)
    console.log('成功：', response)
    fetchregCodes()
  } catch (error) {
    console.log('失败：', error)
  }
}
async function addSecKeyPost(data) {
  try {
    const response = await axios.post('http://localhost:8080/add_secretkey', data)
    console.log('成功：', response)
    fetchData()
  } catch (error) {
    console.log('失败：', error)
  }
}
onBeforeMount(() => {
  // window.main2render.send('renderer-ready')
  fetchData()
  fetchregCodes()
})
onMounted(() => {
  // window.main2render.send('renderer-ready')
})
</script>

<template>
  <!-- 
  接下来写组件：
  1、添加SecretKey的组件
  2、添加注册码的组件 
  -->
  <div class="kaipian_container">
    <input v-model.lazy="inputValue" type="text" />
    <div id="stringlen">{{ inputLen }}</div>
    <div id="mytable01title" class="tabletitle">SecretKey列表</div>
    <div class="mytable01">
      <CompHVxeTable
        class="tablebody"
        :tableFields="tableFields01"
        :tableData="seckeysData"
        :seqWidth="tableConfig01.seqWidth"
        :seqTitle="tableConfig01.seqTitle"
        :seqNoPre="tableConfig01.seqNoPre"
        :seqNoStart="tableConfig01.seqNoStart"
        :seqNoPadLength="tableConfig01.seqNoPadLength"
        :tableHeight="tableConfig01.tableHeight"
        :rowHeight="tableConfig01.rowHeight"
        :headerHeight="tableConfig01.headerHeight"
        :tableScroll="tableConfig01.tableScroll"
        :tableStripe="tableConfig01.tableStripe"
        :intarvalTime="tableConfig01.intarvalTime"
        :interval-frames="tableConfig01.intervalFrames"
        :showCaozuo="tableConfig01.showCaozuo"
        :tableClass="tableConfig01.tableClass"
        :an1text="tableConfig01.an1text"
        @select_sec_key="openAddRegCode"
      ></CompHVxeTable>
      <button class="addseckey" @click="openAddSecretKey">添加SecretKey</button>
    </div>
    <div id="mytable02title" class="tabletitle">注册码列表</div>
    <div class="mytable02">
      <CompHVxeTable
        :tableFields="tableFields02"
        :tableData="regcodesData"
        :seqWidth="tableConfig02.seqWidth"
        :seqTitle="tableConfig02.seqTitle"
        :seqNoPre="tableConfig02.seqNoPre"
        :seqNoStart="tableConfig02.seqNoStart"
        :seqNoPadLength="tableConfig02.seqNoPadLength"
        :tableHeight="tableConfig02.tableHeight"
        :rowHeight="tableConfig02.rowHeight"
        :headerHeight="tableConfig02.headerHeight"
        :tableScroll="tableConfig02.tableScroll"
        :tableStripe="tableConfig02.tableStripe"
        :intarvalTime="tableConfig02.intarvalTime"
        :interval-frames="tableConfig02.intervalFrames"
        :showCaozuo="tableConfig02.showCaozuo"
        :tableClass="tableConfig02.tableClass"
        :an1text="tableConfig02.an1text"
        @select_sec_key="openViewRegCode"
      ></CompHVxeTable>
    </div>
    <div v-if="showAddRegCode" class="addregcode">
      <CompoAddRegCode
        :seckey-data="dataAddSecretKey"
        @add_regcodes="sendDataPost"
      ></CompoAddRegCode>
    </div>
    <button v-if="showAddRegCode" id="closeAddRegcode" @click="closeAddRegCode">关闭</button>
    <div v-if="showViewRegCode" class="viewregcode">
      <CompoViewRegCode :seckey-data="dataViewSecretKey"></CompoViewRegCode>
    </div>
    <button v-if="showViewRegCode" id="closeViewRegCode" @click="closeViewRegCode">关闭</button>
    <div v-if="showAddSecretKey" class="addSecretKey">
      <CompoAddSecretKey @add_secretkey="addSecKeyPost"></CompoAddSecretKey>
    </div>
    <button v-if="showAddSecretKey" id="closeAddSecretKey" @click="closeAddSecretKeyFun">
      关闭
    </button>
  </div>
</template>

<style lang="scss" scoped>
.kaipian_container {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 0;
  #stringlen {
    color: red;
    font-size: 2rem;
    z-index: 2;
  }
  .tabletitle {
    width: fit-content;
    height: fit-content;
    color: orangered;
    font-size: 2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #mytable01title {
    position: absolute;
    top: 6%;
  }
  .mytable01 {
    width: 90%;
    max-height: 30rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    z-index: 2;
    .tablebody {
      z-index: 3;
    }
    .addseckey {
      width: fit-content;
      height: fit-content;
      font-size: 1.2rem;
      padding: 0.6rem 1rem;
      color: orangered;
      background-color: aquamarine;
      border-radius: 0.5rem;
      position: absolute;
      right: 2rem;
      top: 1rem;
      z-index: 4;
    }
  }
  #mytable02title {
    position: absolute;
    top: 46%;
  }
  .mytable02 {
    width: 96%;
    max-height: 40rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  .addregcode {
    width: 96vw;
    height: 88vh;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    z-index: 5;
  }
  #closeAddRegcode {
    width: 4vw;
    height: 2vw;
    position: absolute;
    right: 3vw;
    top: 7vh;
    z-index: 6;
  }
  .viewregcode {
    width: 96vw;
    height: 88vh;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    z-index: 5;
  }
  #closeViewRegCode {
    width: 4vw;
    height: 2vw;
    position: absolute;
    right: 3vw;
    top: 7vh;
    z-index: 6;
  }
  .addSecretKey {
    width: 96vw;
    height: 88vh;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    z-index: 5;
  }
  #closeAddSecretKey {
    width: 4vw;
    height: 2vw;
    position: absolute;
    right: 3vw;
    top: 7vh;
    z-index: 6;
  }
}
</style>
